<template>
  <a-input
    :style="{ width }"
    :placeholder="t('component.icon.placeholder')"
    :class="prefixCls"
    v-model:value="currentColor"
  >
    <template #addonAfter>
      <ColorPicker v-model:modelValue="currentColor" @change="handleChange" />
    </template>
  </a-input>
</template>
<script lang="ts" setup>
  import { ref, watchEffect, watch } from 'vue';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { Input } from 'ant-design-vue';
  import ColorPicker from './SimpleColorPicker.vue';

  import { propTypes } from '/@/utils/propTypes';
  import { useI18n } from '/@/hooks/web/useI18n';

  // 没有使用别名引入，是因为WebStorm当前版本还不能正确识别，会报unused警告
  const AInput = Input;

  const props = defineProps({
    value: propTypes.string,
    width: propTypes.string.def('100%'),
    pageSize: propTypes.number.def(70),
    copy: propTypes.bool.def(false),
    mode: propTypes.oneOf(['svg', 'iconify']).def('iconify'),
  });

  const emit = defineEmits(['change', 'update:value']);

  const currentColor = ref('');

  const { t } = useI18n();
  const { prefixCls } = useDesign('color-picker');

  watchEffect(() => {
    currentColor.value = props.value;
  });

  watch(
    () => currentColor.value,
    (v) => {
      emit('update:value', v);
      return emit('change', v);
    },
  );

  function handleChange(value) {
    currentColor.value = value;
  }
</script>

<style lang="less">
  @prefix-cls: ~'tbv3-color-picker';

  .@{prefix-cls} {
    .ant-input-group-addon {
      padding: 0 !important;
    }
    .ant3-color-picker {
      height: 31px;
      padding: 0;
      border: 0;
      display: block;
      .el-color-picker__color {
        border: 0;
      }
      .el-color-picker__color-inner {
        border: 0;
        border-radius: 0 6px 6px 0;
        line-height: 31px;
      }
    }
  }
</style>
